<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="|${#request.getContextPath()}/resources/|"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="css/base.css" type="text/css" />
    <link rel="stylesheet" href="css/shop_common.css" type="text/css" />
    <link rel="stylesheet" href="css/shop_header.css" type="text/css" />
    <link rel="stylesheet" href="css/shop_gouwuche.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/topNav.js" ></script>
    <script type="text/javascript" src="js/jquery.goodnums.js" ></script>
    <script type="text/javascript" src="js/shop_gouwuche.js" ></script>

    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/shopcart.js"></script>
</head>
<body>
<!-- Header  -wll-2013/03/24 -->
<div class="shop_hd">
    <!-- Header TopNav -->
    <div class="shop_hd_topNav">
        <div class="shop_hd_topNav_all">
            <!-- Header TopNav Left -->
            <div class="shop_hd_topNav_all_left">
                <p id="pid">

                </p>
            </div>
            <!-- Header TopNav Left End -->

            <!-- Header TopNav Right -->
            <div class="shop_hd_topNav_all_right">
                <ul class="topNav_quick_menu">

                    <li>
                        <div class="topNav_menu">
                            <a href="#" class="topNavHover">我的商城<i></i></a>
                            <div class="topNav_menu_bd" style="display:none;" >
                                <ul>
                                    <li><a title="已买到的商品" target="_top" href="#">已买到的商品</a></li>
                                    <li><a title="个人主页" target="_top" href="#">个人主页</a></li>
                                    <li><a title="我的订单" target="_top" href="http://localhost:16666/order/list">我的订单</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="topNav_menu">
                            <a href="#" class="topNavHover">卖家中心<i></i></a>
                            <div class="topNav_menu_bd" style="display:none;">
                                <ul>
                                    <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
                                    <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>

                    <li>
                        <!-- TODO 购物车展示列表 -->
                        <div class="topNav_menu">
                            <a href="http://localhost:16666/cart/showlist" class="topNavHover">购物车<b id="cartnumberid">0</b>种商品<i></i></a>
                            <div id="cartid" class="topNav_menu_bd" style="display:none;width: 300px; height: 400px">

                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="topNav_menu">
                            <a href="#" class="topNavHover">我的收藏<i></i></a>
                            <div class="topNav_menu_bd" style="display:none;">
                                <ul>
                                    <li><a title="收藏的商品" target="_top" href="#">收藏的商品</a></li>
                                    <li><a title="收藏的店铺" target="_top" href="#">收藏的店铺</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="topNav_menu">
                            <a href="#">站内消息</a>
                        </div>
                    </li>

                </ul>
            </div>
            <!-- Header TopNav Right End -->
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <!-- Header TopNav End -->

    <!-- TopHeader Center -->
    <div class="shop_hd_header">
        <div class="shop_hd_header_logo"><h1 class="logo"><a href="/"><img src="images/logo.png" alt="ShopCZ" /></a><span>ShopCZ</span></h1></div>
        <div class="shop_hd_header_search">
            <ul class="shop_hd_header_search_tab">
                <li id="search" class="current">商品</li>
                <li id="shop_search">店铺</li>
            </ul>
            <div class="clear"></div>
            <div class="search_form">
                <form method="post" action="http://localhost:16666/search/keyword">
                    <div class="search_formstyle">
                        <input type="text" class="search_form_text" name="keyword" placeholder="搜索其实很简单！" />
                        <input type="submit" class="search_form_sub" name="secrch_submit" value="" title="搜索" />
                    </div>
                </form>
            </div>
            <div class="clear"></div>
            <div class="search_tag">
                <a>李宁</a>
                <a>耐克</a>
                <a>Kappa</a>
                <a>双肩包</a>
                <a>手提包</a>
            </div>

        </div>
    </div>
    <div class="clear"></div>
    <!-- TopHeader Center End -->

    <!-- Header Menu -->
    <div class="shop_hd_menu">
        <!-- 所有商品菜单 -->

        <div id="shop_hd_menu_all_category" class="shop_hd_menu_all_category"><!-- 首页去掉 id="shop_hd_menu_all_category" 加上clsss shop_hd_menu_hover -->
            <div class="shop_hd_menu_all_category_title"><h2 title="所有商品分类"><a href="javascript:void(0);">所有商品分类</a></h2><i></i></div>
            <div id="shop_hd_menu_all_category_hd" class="shop_hd_menu_all_category_hd">
                <ul class="shop_hd_menu_all_category_hd_menu clearfix">
                    <!-- 单个菜单项 -->
                    <li id="cat_1" class="">
                        <h3><a title="男女服装">男女服装</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="女装">女装</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="男装">男装</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <!-- 单个菜单项 End -->
                    <li id="cat_2" class="">
                        <h3><a title="鞋包配饰">鞋包配饰</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="鞋子">鞋子</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="包包">包包</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>

                    <li id="cat_3" class="">
                        <h3><a title="美容美妆">美容美妆</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="美容">美容</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="美妆">美妆</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>

                    <li id="cat_4" class="">
                        <h3><a title="美容美妆">美容美妆</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="美容">美容</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="美妆">美妆</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>

                    <li id="cat_5" class="">
                        <h3><a title="美容美妆">美容美妆</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="美容">美容</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="美妆">美妆</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>

                    <li id="cat_6" class="">
                        <h3><a title="美容美妆">美容美妆</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="美容">美容</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="美妆">美妆</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li id="cat_7" class="">
                        <h3><a title="美容美妆">美容美妆</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="美容">美容</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="美妆">美妆</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li id="cat_8" class="">
                        <h3><a title="美容美妆">美容美妆</a></h3>
                        <div id="cat_1_menu" class="cat_menu clearfix" style="">
                            <dl class="clearfix">
                                <dt><a href="美容">美容</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>

                            <dl class="clearfix">
                                <dt><a href="美妆">美妆</a></dt>
                                <dd>
                                    <a>风衣</a>
                                    <a>长袖连衣裙</a>
                                    <a>毛呢连衣裙</a>
                                    <a>半身裙</a>
                                    <a>小脚裤</a>
                                    <a>加绒打底裤</a>
                                    <a>牛仔裤</a>
                                    <a>打底衫</a>
                                    <a>情侣装</a>
                                    <a>棉衣</a>
                                    <a>毛呢大衣</a>
                                    <a>毛呢短裤</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li class="more"><a>查看更多分类</a></li>
                </ul>
            </div>
        </div>
        <!-- 所有商品菜单 END -->

        <!-- 普通导航菜单 -->
        <ul class="shop_hd_menu_nav">
            <li class="current_link"><a><span>首页</span></a></li>
            <li class="link"><a><span>团购</span></a></li>
            <li class="link"><a><span>品牌</span></a></li>
            <li class="link"><a><span>优惠卷</span></a></li>
            <li class="link"><a><span>积分中心</span></a></li>
            <li class="link"><a><span>运动专场</span></a></li>
            <li class="link"><a><span>微商城</span></a></li>
        </ul>
        <!-- 普通导航菜单 End -->
    </div>
    <!-- Header Menu End -->

</div>
<div class="clear"></div>
<!-- 面包屑 注意首页没有 -->
<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
			<a>首页</a>&nbsp;›&nbsp;
			<a>我的商城</a>&nbsp;›&nbsp;
			<a>我的购物车</a>
		</span>
</div>
<div class="clear"></div>
<!-- 面包屑 End -->

<!-- Header End -->

<!-- 购物车 Body -->
<div class="shop_gwc_bd clearfix">
    <!-- 在具体实现的时候，根据情况选择其中一种情况 -->
    <!-- 购物车为空 -->
    <div th:if="${shopcarts == null || #lists.size(shopcarts) == 0}" class="empty_cart mb10">
        <div class="message">
            <p>购物车内暂时没有商品，您可以<a href="http://localhost:16666/">去首页</a>挑选喜欢的商品</p>
        </div>
    </div>
    <!-- 购物车为空 end-->

    <!-- 购物车有商品 -->
    <div th:unless="${shopcarts == null || #lists.size(shopcarts) == 0}" class="shop_gwc_bd_contents clearfix">
        <!-- 购物流程导航 -->
        <div class="shop_gwc_bd_contents_lc clearfix">
            <ul>
                <li class="step_a hover_a">确认购物清单</li>
                <li class="step_b">确认收货人资料及送货方式</li>
                <li class="step_c">购买完成</li>
            </ul>
        </div>
        <!-- 购物流程导航 End -->

        <script>
            /**
             * 全选、反选
             * @param flag
             */
            function checkall(flag){
                $("input[type='checkbox'][name='cart_checkbox']").attr('checked', flag);
            }

            /**
             * 选择购物车商品
             */
            function check_cart(ele){

                //ajax -> 服务器 -> 结算 -> 返回页面

                //获得总金额
                var allprice = parseInt(parseFloat($("#good_zongjia").html()) * 100);

                //获得商品小计.
                var xiaoji = parseInt(parseFloat($(ele).attr("alt")) * 100);

                if(ele.checked){
                    //选中，累加金额
                    allprice += xiaoji;
                } else {
                    //取消，删减金额
                    allprice -= xiaoji;
                }

                var number = allprice / 100;

                if((number + '').indexOf('.') == -1){
                    number += ".00";
                }

                //将总金额写入页面
                $("#good_zongjia").html(number);
            }
        </script>

        <!-- 购物车列表 -->
        <form id="formid" action="http://localhost:16666/order/edit" method="get">
        <table>
            <thead>
            <tr>
                <th>全选<input type="checkbox" onclick="checkall(this.checked);"/></th>
                <th colspan="2"><span>商品</span></th>
                <th><span>单价(元)</span></th>
                <th><span>数量</span></th>
                <th><span>小计</span></th>
                <!--<th><span>操作</span></th>-->
            </tr>
            </thead>
            <tbody>

            <tr th:each="cart : ${shopcarts}">
                <td><input name="cart_checkbox" type="checkbox"
                           th:value="${cart.goods.id}"
                           th:alt="${cart.goods.price * cart.number}"
                           onclick="check_cart(this);"/></td>
                <td class="gwc_list_pic"><a><img th:src="${cart.goods.fengmian}" style="width: 100px; height: 80px;" src="images/4_7b5239c3f153ae4b67ff760f54408a5b.jpg_tiny.jpg" /></a></td>
                <td class="gwc_list_title"><a th:text="${cart.goods.subject}">双层花架简约韩式田园欧式地中海风格宜家纯白架现代花盆架电话架 </a></td>
                <td class="gwc_list_danjia"><span th:text="${#numbers.formatCurrency(cart.goods.price)}">￥<strong id="danjia_001">2550.00</strong></span></td>
                <td class="gwc_list_shuliang">
                    <span>
                        <a  href="javascript:void(0);" onclick="jian(this)" th:alt="${cart.gid}" >-</a>
                        <input type="text" value="1" id="goods_001" class="good_nums" th:value="${cart.number}" />
                        <a href="javascript:void(0);" onclick="jia(this)" th:alt="${cart.gid}">+</a>
                    </span>
                </td>
                <td class="gwc_list_xiaoji"><span id="finalPrice" th:text="${#numbers.formatCurrency(cart.goods.price * cart.number)}">￥<strong id="xiaoji_001" class="good_xiaojis">2550.00</strong></span></td>

                <!--
                                <td class="gwc_list_xiaoji"><span th:text="${#numbers.formatCurrency(cart.goods.price * cart.number)}">￥<strong id="xiaoji_001" class="good_xiaojis">2550.00</strong></span></td>

                <td class="gwc_list_caozuo"><a>收藏</a><a href="javascript:void(0);" class="shop_good_delete">删除</a></td>-->
            </tr>
            </tbody>
            <script>
                function jian(ele) {
                    var gid =$(ele).attr("alt")
                    var number = $("#goods_001").val();
                    var newNumber = number - 1;
                    if (newNumber<1){
                        return;
                    }
                    $("#goods_001").val(newNumber);
                    // alert(gid);
                    // alert(newNumber);
                    $.ajax({
                        type: "post",
                        url: "http://localhost:16666/cart/updateGoodsNumber",
                        data: {"gid":gid,"number":newNumber},
                        success: function(data){

                            //$("#goods_001").val(data.number);
                            //$("#finalPrice").html(data.subtotal);
                            //刷新页面
                            location.reload();
                        }
                    })

                }
                function jia(ele) {
                    var gid =$(ele).attr("alt")
                    var number = $("#goods_001").val();
                    var newNumber = parseInt(number) + 1;
                    if (newNumber<1){
                        return;
                    }
                    $("#goods_001").val(newNumber);
                    // alert(gid);
                    // alert(newNumber);
                    $.ajax({
                        type: "post",
                        url: "http://localhost:16666/cart/updateGoodsNumber",
                        data: {"gid":gid,"number":newNumber},
                        success: function(data){
                            //刷新页面
                            location.reload();
                        }
                    })
                }
            </script>
            <tfoot>
            <tr>
                <td colspan="6">
                    <div class="gwc_foot_zongjia">商品总价(不含运费)<span>￥<strong id="good_zongjia">0.00</strong></span></div>
                    <div class="clear"></div>
                    <div class="gwc_foot_links">
                        <a class="go">继续购物</a>
                        <a class="op" onclick="orderEdit();">确认并填写订单</a>
                    </div>
                </td>
            </tr>
            </tfoot>
        </table>
        </form>
        <!-- 购物车列表 End -->
    </div>
    <!-- 购物车有商品 end -->
    <script>
        function orderEdit(){
            //提交表单
            $("#formid").submit();
        }
    </script>

</div>
<!-- 购物车 Body End -->

<!-- Footer - wll - 2013/3/24 -->
<div class="clear"></div>
<div class="shop_footer">
    <div class="shop_footer_link">
        <p>
            <a>首页</a>|
            <a>招聘英才</a>|
            <a>广告合作</a>|
            <a>关于ShopCZ</a>|
            <a>关于我们</a>
        </p>
    </div>
    <div class="shop_footer_copy">
        <p>Copyright 2004-2013 itcast Inc.,All rights reserved.</p>
    </div>
</div>
<!-- Footer End -->

</body>
</html>